<template>
  <div  class="htmlCon">
      <div>
          <div>
              <div >
                  <el-collapse  :class="moods" v-model="activeName" accordion>
                    <el-collapse-item title="我可以请求数据了" name="1" disabled>
                      <div><i class="iconfont icon-http"></i><h2>AJAX基本使用</h2></div>
                      <blockquote>
                        <pre>
                          const xhr = new XmlHtttpRequest()
                          xhr.open("GET",url)
                          xhr.send()
                          xhr.onreadychangestate =  function (){
                            if(xhr.readyState === 4) {
                              if(xhr.status >= 200 || xhr.status &lt; 300) {
                                console.log(xhr.response)
                              }
                            }
                          }
                        </pre>
                      </blockquote>
                      <el-divider></el-divider>
                      <div><i class="iconfont icon-http"></i><h2>Axios基本使用</h2></div>
                      <blockquote>
                        <h3>第一步安装axios</h3>
                        <pre>npm i axios || yarn add axios</pre>
                        <h3>使用axios</h3>
                        <pre>
                          axios({
                            method: "GET",
                            url: url,
                            data: {数据}
                          }).then ....
                        </pre>
                         <div style="text-align: center;">
                          <small>返回的是promise类型</small>
                        </div>
                      </blockquote>
                      <el-divider></el-divider>
                      <div><i class="iconfont icon-http"></i><h2>fetch基本使用</h2></div>
                      <pre>
                        fetch(url).then ....
                      </pre>
                       <div style="text-align: center;">
                          <small>返回的是promise类型</small>
                        </div>
                    </el-collapse-item>
                    </el-collapse>
              </div>
          </div>
       
      </div>
         <div>
               
          </div>
  </div>
</template>

<script>
export default {
    name: "BasicRequest",
    data(){
        return {
            activeName: ["1"],
            moods: "conWrapper",
        }
    }
}
</script>

<style scoped>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
 
</style>